<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>主页</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/css/materialize.min.css"
          type="text/css">
    <link rel="stylesheet" href="/css/me.css" type="text/css">
    <script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/jquery.js"
            charset="UTF-8"></script>
    <script type="text/javascript"
            src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/materialize.min.js"
            charset="UTF-8"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs/v0.5.1/fingerprint.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="/js/init.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="common :: navbar(1)"></div>
<div class="container main">
    <div class="row">
        <div class="card">
            <div class="card-image">
                <img th:src="${imageProxy} + 'https://picsum.photos/seed/picsum/325/200?blur=4'" width="1232"
                     height="100">
                <span class="card-title" id="channelTitleSpan" th:text="${votes.title}" style="font-weight: 900;">Card Title</span>
            </div>
        </div>
    </div>
    <div class="card-panel">
        <div class="row">
            <form>
                <input id="sumNum" th:value="${votes.getVotes().size()}" hidden>
                <input th:id="channelId" th:value="${votes.getId()}" hidden>
                <div class="row" th:each="vote, voteStat : ${votes.getVotes()}">
                    <h5 class="title" th:text=" ${voteStat.index + 1} + '. ' + ${vote.title}"></h5>
                    <p th:each="option : ${vote.voteOptionsList}" style="    margin-left: 20px;">
                        <label>
                            <input th:name="'vote_'+ ${vote.id}" type="radio" th:value="${option.id}"
                                   th:id="'option_' + ${option.id}" class="option_input"/>
                            <span th:text="${option.optionsInfo}">Red</span>
                        </label>
                    </p>
                </div>
            </form>
            <div class="row center-align">
                <button class="btn-large waves-effect waves-light large" id="submit_btn">提交<i
                        class="material-icons tiny right">favorite_border</i></button>
            </div>
        </div>
    </div>
</div>

<div th:replace="common::footer"></div>

<script th:inline="javascript">
    M.AutoInit();
    myInit();
    let canVote = [[${canVote}]];
    // console.log('你的VID:' +  fingerprint)
    // console.log(canVote);
    if (canVote) {
        if (canVote === 1) {
            M.toast({
                html: '对不起，当前IP地址的投票数量已经超限！',
                classes: 'rounded red',
            });
        } else if (canVote === 2) {
            M.toast({
                html: '您已填写过该投票！',
                classes: 'rounded red',
            });
            let answers = JSON.parse([[${answers}]]);
            for (let i = 0; i < answers.length; i++) {
                $("#option_" + answers[i]).prop("checked", true);
            }
        }
        $("input").prop("disabled", true);
        $("#submit_btn").prop("disabled", true);
    }
    let form = document.querySelector("form");
    $("#submit_btn").click(function () {
        let data = new FormData(form);
        let array = new Array();
        for (const entry of data) {
            array.push(entry[1]);
        }
        let size = array.length;
        let sum = $("#sumNum").val();
        if (size < sum) {
            M.toast({html: '请填写完整！', classes: 'rounded red lighten-2'})
            // console.log("请填写完整!")
        } else {
            let channelId = $("#channelId").val()
            let dataForm = JSON.stringify(array);
            console.log(dataForm)
            $.ajax({
                url: "/vote?channel_id=" + channelId,
                type: "post",
                contentType: "application/json",
                data: dataForm,
                dataType: "json"
            }).done(function (data) {
                console.log(data.code);
                if (data.code == 200) {
                    M.toast({
                        html: '投票成功！,感谢您的投票！',
                        classes: 'rounded green',
                        displayLength: 1000,
                        inDuration: 100,
                        outDuration: 0,
                        completeCallback: function () {
                            $("input").prop("disabled", true);
                            $("submit_btn").prop("disabled", true);
                        }
                    });
                    $("#submit_btn").prop("disabled", true);
                } else {
                    alert("保存失败！");
                }
            })
        }
    })
</script>

</body>
</html>